<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		
	</head>
	<body>
		<div id="app">
		<!-- 需求：将数据字母进行反转  abc 反转 cba
			方法：将数据拆分为数组，将数组进行反转，在将数组合并为字符串
			1.   .split 拆分成数组
			2.   .reverse 反转数据
			3.   .join 数组转化为字符串
			
		 -->
		用户输入: <input v-model="msg" /> <br>
		数据的展现: {{msg.split('').reverse().join('')}} <br>
		<!-- 计算属性用法：
			将需要计算的操作通过特定的方法先行计算，之后将结果进行展现
			使用场景：如果数据需要大量计算，可以使用计算属性实现
		-->
		计算属性: {{reverse}}<br /><hr />
		<!-- 面试题：计算属性和计算方法的区别
			计算属性如果调用多次，则有缓存的机制，只计算一次
			方法调用没有缓存机制，所以调用多次，则计算多次
			如果一个计算重复调用时首选计算属性
		 -->
		<!-- 计算属性 -->
		{{reverse}} {{reverse}} <br />
		<!-- 将方法的计算结果，在该位置进行展现，所以需要return -->
		{{reverseMe2()}} {{reverseMe2()}}
		<button @click="reverseMe">调用方法</button>
		
		
		<!-- 方法 -->
		
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: ''
				},
			
				
				//定义计算属性
				computed: {
					//定义一个方法，要求必须有返回值
					reverse(){
						console.log("计算属性执行")
						return this.msg.split('').reverse().join('')
					}
				},
				methods: {
					reverseMe(){
						console.log("方法执行")
						this.msg = this.msg.split('').reverse().join('')
					},
					
					reverseMe2(){
						console.log("方法执行")
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
		
	</body>
</html>

